<!DOCTYPE html>
<html>
<head>
    <title>Generate Icons</title>
</head>
<body>
    <canvas id="icon48" width="48" height="48"></canvas>
    <canvas id="icon128" width="128" height="128"></canvas>
    <script>
        function drawIcon(canvasId, size) {
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');
            
            // 填充蓝色背景
            ctx.fillStyle = '#4285f4';
            ctx.fillRect(0, 0, size, size);
            
            // 添加白色文字
            ctx.fillStyle = 'white';
            ctx.font = `${size/2}px Arial`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('S', size/2, size/2);
            
            // 下载链接
            const link = document.createElement('a');
            link.download = `icon${size}.png`;
            link.href = canvas.toDataURL('image/png');
            link.click();
        }
        
        // 生成两种尺寸的图标
        drawIcon('icon48', 48);
        drawIcon('icon128', 128);
    </script>
</body>
</html>
